<template>
     <Modal  v-model="data" :title="title" @on-ok="ok" @on-cancel="cancel" :width="modalWidth">
       <Form  ref="form" :model="form" :label-width="70" :rules="userFormValidate">
         <FormItem label="组织机构" prop="orgId" >
                     <department-tree-choose :is-show="true" @on-change="handleSelectDepTree" ref="orgId"></department-tree-choose>
                           <!-- <Input type="text" v-model="from.orgId" ></Input> -->
              
                </FormItem>     
                    <FormItem label="页面名称" class="designItem" prop="title">
          <Input v-model="form.title" autocomplete="off" />
        </FormItem>
        </Form>  
         <slot></slot>
    </Modal>
</template>

<script>
import departmentTreeChoose from "@/views/my-components/xboot/department-tree-choose";
import { initDepartment } from "@/api/index";
export default {
name:'ui-design-add',
components:{
     departmentTreeChoose
},
  props: {
    // 对话框标题
    title: {
      type: String,
      default: "新建页面"
    },
    // 对话框显示隐藏
    value: {
      type: Boolean,
      default: false
    },
      datas:{
            type: Object,
      default:function(){
        return {
            id:null,
            title:''
        }
      }
    },
    // 对话框宽度，高度自适应
    modalWidth: {
      type: Number,
      default: "520"
    }
  },
  data() {
    return {
      data: this.value,
      form: {
                 orgId:null,
                 title:''
                },
                 userFormValidate: {
                    orgId: [
                        { required: true, message: "组织机构不能为空", trigger: "blur" }
                    ],
                    title: [
                        { required: true, message: "页面名称不能为空", trigger: "blur" }
                    ],
                },
    };
  },
    watch: {
    value(val) { 
      this.data = val;
      if(val){
          this.form.orgId=this.datas.orgId;
          this.form.title=this.datas.title;
          this.form.id=this.datas.id;
          this.getdepartmentId(this.datas.orgId)      
          this.$refs.depTree.initDepartmentData();        
      }
    }
  },
  methods: {
    ok() {
      this.$emit("changeVal", {modal:false,button:true,form:this.form});
    },
    cancel() {
      this.$emit("changeVal", {modal:false,button:false,form:{}});
    },
      handleSelectDepTree(v) {     
        if(v.constructor === Array){
         this.form.orgId = v[0];
        }else{
         this.form.orgId = v;
        }                         
            },
  },
}
</script>
<style lang="less" scoped>
.split-atrr{
  width: 100%;
  height: 100%;
}
.designItem{
  margin-bottom:10px ;
}
</style>